<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Android—React Native编程 | 海晨忆的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  
  
  <meta name="description" content="个人博客：haichenyi.com。感谢关注 新公司，新的开始，新的技术&amp;emsp;&amp;emsp;新公司的项目，用到的RN编程，之前完全没有碰到过，遇到新技术，之前完全没有碰到过怎么办？google、百度咯。通过不屑的努力，找到了恋猫月亮 的三篇关于RN的文章。我感觉还是很不错的。">
<meta property="og:type" content="article">
<meta property="og:title" content="Android—React Native编程">
<meta property="og:url" content="https://haichenyi.com/2018/05/13/Android—React-Native编程/index.html">
<meta property="og:site_name" content="海晨忆的博客">
<meta property="og:description" content="个人博客：haichenyi.com。感谢关注 新公司，新的开始，新的技术&amp;emsp;&amp;emsp;新公司的项目，用到的RN编程，之前完全没有碰到过，遇到新技术，之前完全没有碰到过怎么办？google、百度咯。通过不屑的努力，找到了恋猫月亮 的三篇关于RN的文章。我感觉还是很不错的。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://haichenyi.com/uploads/article/2018-05-13/python.png">
<meta property="og:image" content="https://haichenyi.com/uploads/article/2018-05-13/node.png">
<meta property="og:image" content="https://haichenyi.com/uploads/article/2018-05-13/project.png">
<meta property="og:updated_time" content="2019-09-18T08:52:45.165Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Android—React Native编程">
<meta name="twitter:description" content="个人博客：haichenyi.com。感谢关注 新公司，新的开始，新的技术&amp;emsp;&amp;emsp;新公司的项目，用到的RN编程，之前完全没有碰到过，遇到新技术，之前完全没有碰到过怎么办？google、百度咯。通过不屑的努力，找到了恋猫月亮 的三篇关于RN的文章。我感觉还是很不错的。">
<meta name="twitter:image" content="https://haichenyi.com/uploads/article/2018-05-13/python.png">
  
    <link rel="alternate" href="/atom.xml" title="海晨忆的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/uploads/artistic_image/head.jpg">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/highlight.css">
  <script>
  let antiquityStorage = window.sessionStorage.getItem('antiquitySessionStorage');
  if (antiquityStorage == '' || antiquityStorage == null) {
    var antiquityLoader = '<div id="loaderbox"><div class="loader"><div class="load-roll"><div class="load-top"></div><div class="load-right"></div><div class="load-bottom"></div></div></div></div>';
    document.write(antiquityLoader);
    document.body.style.overflow = 'hidden'
  }
  </script>
</head>

<body>
  <div id="fullpage" class="mobile-nav-right">
    
      <div id="wrapper" style="background-image: url(/uploads/artistic_image/bg.jpg)" title="背景图片来自网络">
    
    
      <header id="header">
  <div id="nav-toggle" class="nav-toggle"></div>
  <div class="head-box global-width">
    <nav class="nav-box nav-right">
      
        <a class="nav-item" href="/" title
        
        >首页</a>
      
        <a class="nav-item" href="/archives" title
        
        >归档</a>
      
        <a class="nav-item" href="/about" title
        
        >简历</a>
      
    </nav>
  </div>
</header>
      <div id="middlecontent" title class="global-width sidebar-left">
        <section id="main"><article id="post-Android—React-Native编程" class="article global-container article-type-post" itemscope itemprop="blogPost">
  
    <header class="article-header">
      
  
    <h1 class="article-title" itemprop="name">
      Android—React Native编程
    </h1>
  

    </header>
  
  <div class="article-meta">
    <a href="/2018/05/13/Android—React-Native编程/" class="article-date">
  <time datetime="2018-05-13T14:28:07.000Z" itemprop="datePublished">2018-05-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Android-常用功能/">Android -常用功能</a>
  </div>

    
  </div>
  
    <span id="busuanzi_container_page_pv">
      本文总阅读量<span id="busuanzi_value_page_pv"></span>次
    </span>
  

  <div class="article-inner">
    
    <div class="article-content article-content-cloud doorframe mac" itemprop="articleBody">
      
        <p><strong>个人博客：haichenyi.com。感谢关注</strong></p>
<h2 id="新公司，新的开始，新的技术"><a href="#新公司，新的开始，新的技术" class="headerlink" title="新公司，新的开始，新的技术"></a>新公司，新的开始，新的技术</h2><p>&emsp;&emsp;新公司的项目，用到的RN编程，之前完全没有碰到过，遇到新技术，之前完全没有碰到过怎么办？google、百度咯。通过不屑的努力，找到了<a href="https://www.jianshu.com/u/6e613846e1ea" target="_blank" rel="noopener">恋猫月亮 </a>的三篇关于RN的文章。我感觉还是很不错的。</p>
 <a id="more"></a>
<p><a href="https://www.jianshu.com/p/97692b1c451d" target="_blank" rel="noopener">从Android到React Native开发（一、入门）</a></p>
<p><a href="https://www.jianshu.com/p/bec040926db8" target="_blank" rel="noopener">从Android到React Native开发（二、通信与模块实现）</a></p>
<p><a href="https://www.jianshu.com/p/a488674d55b3" target="_blank" rel="noopener">从Android到React Native开发（三、自定义原生控件支持）</a></p>
<p>&emsp;&emsp;可以先浏览上面的第一篇入门，再过来看我这篇文章，我这篇文章就是讲怎么运行一个RN，我只是针对我的项目，把RN的部分提取了出来，上面大佬讲的比较全面。</p>
<h2 id="React-Native环境配置"><a href="#React-Native环境配置" class="headerlink" title="React Native环境配置"></a>React Native环境配置</h2><p><strong>开发工具</strong>：android studio。我不知道为什么要换开发工具。AS不好吗？环境还是跟你之前开发的一样配置，不用变</p>
<p><strong>python安装</strong>：python官网，下载安装。记得配置环境变量。不用非要按照他那个上面说的去安装。安装完成之后cmd里面敲python然后回车，看到如下界面:</p>
<p><img src="/uploads/article/2018-05-13/python.png" alt="python.png"></p>
<p><strong>node.js安装</strong>：node也是一样，百度安装,配置完环境变量。cmd里面敲 npm -v然后回车，看到如下界面</p>
<p><img src="/uploads/article/2018-05-13/node.png" alt="node.png"></p>
<p>最后，跑如下命令：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">//安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。</span><br><span class="line">npm config set registry https://registry.npm.taobao.org --global</span><br><span class="line">npm config set disturl https://npm.taobao.org/dist --global</span><br><span class="line">//React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。</span><br><span class="line">npm install -g react-native-cli</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;至此，RN的配置就完成了。记得配置NDK环境，然后就是上你们公司的svn，或者git去down项目下来,应该还会有一个错误，那就是找不到<strong>react.gradle</strong>的路径，找到你添加依赖的那个gradle，在最上面添加如下代码：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">apply from: &quot;../../node_modules/react-native/react.gradle&quot;</span><br></pre></td></tr></table></figure></div>
<p>这个配置应该是添加greenDao那个是一样的，这样就能找到了<strong>react.gradle</strong></p>
<p>项目结构如下：</p>
<p><img src="/uploads/article/2018-05-13/project.png" alt="project.png"></p>
<p>&emsp;&emsp;我用箭头标记了，你down下来的项目，应该是没有node_modules文件夹的，这个文件夹是怎么产生的呢？你在cmd进入你down的项目，就是图片上面的文件目录，跑如下命令即可</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure></div>
<p>当命令运行完，就可以跑项目了。</p>
<h2 id="React-Native项目搭建"><a href="#React-Native项目搭建" class="headerlink" title="React Native项目搭建"></a>React Native项目搭建</h2><p>&emsp;&emsp;同鞋，你有freeStyle吗？有没有用过WebView？WebView就是在你的xml里面新增了一个WebView控件，RN也一样，他的这个控件就是ReactRootView。所以，这个控件哪里来？当然是添加依赖了</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//版本号你自己找</span><br><span class="line">compile &apos;com.facebook.react:react-native:0.50.3&apos;</span><br></pre></td></tr></table></figure></div>
<p>最终的作用代码就是：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mReactRootView.startReactApplication(mReactInstanceManager, &quot;XXX&quot;, null);</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;这个ReacRootView对象，你可以new出来，也可以写在xml里面findViewById。只要你能获取到这个对象就可以了，然后就是这个方法：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">startReactApplication(ReactInstanceManager reactInstanceManager, String moduleName, @Nullable Bundle initialProperties)</span><br></pre></td></tr></table></figure></div>
<p>三个参数</p>
<ol>
<li>ReactInstanceManager reactInstanceManager</li>
<li>String moduleName</li>
<li>@Nullable Bundle initialProperties</li>
</ol>
<h3 id="第一个参数：ReactInstanceManager"><a href="#第一个参数：ReactInstanceManager" class="headerlink" title="第一个参数：ReactInstanceManager"></a>第一个参数：<strong>ReactInstanceManager</strong></h3><p>就像配置WebView的参数，那些什么配置client允许js弹窗啊，新的页面直接覆盖原来的页面，并不是新建一个页面之类的参数，对应的这里，就是配置<strong>ReactInstanceManager</strong><br><div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">ReactInstanceManagerBuilder builder = ReactInstanceManager.builder();</span><br><span class="line">        builder = builder</span><br><span class="line">                .setApplication(getApplication())</span><br><span class="line">                .setBundleAssetName(&quot;index.android.bundle&quot;)</span><br><span class="line">                .setJSMainModulePath(&quot;index.android&quot;);</span><br><span class="line"></span><br><span class="line">        mReactInstanceManager = builder</span><br><span class="line">                .addPackage(new MainReactPackage())</span><br><span class="line">                .addPackage(new YzgHDReactPackage())</span><br><span class="line">//                .setUseDeveloperSupport(!Global.ISPRD)</span><br><span class="line">                .setUseDeveloperSupport(true)</span><br><span class="line">              .setInitialLifecycleState(LifecycleState.RESUMED)</span><br><span class="line">                .build();</span><br></pre></td></tr></table></figure></div></p>
<p>&emsp;&emsp;前面的builder的初始化是必须要写的，setApplication，如果你没有自己写application，那就直接getApplication，如果，你有自己实现application那就传你的application对象。</p>
<p>&emsp;&emsp;setBundleAssetName和setJSMainModulePath都是写死的，后面的名字也是写死的。</p>
<p>&emsp;&emsp;然后就是添加package，在package里面添加module。这里就是JS和Android相互调用的地方。package里面要实现ReactPackage，在createNativeModules里面去添加moudle</p>
<h3 id="第二个参数：String-moduleName"><a href="#第二个参数：String-moduleName" class="headerlink" title="第二个参数：String moduleName"></a>第二个参数：<strong>String moduleName</strong></h3><p>这个moudleName是怎么来的？就是我们前面设置的MoudlePath那个JS里面的。这里的路径应该是<strong>index.android.js</strong>，是一个js文件，打开之后，最下面有如下代码：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">AppRegistry.registerComponent(&apos;zzz&apos;, () =&gt; XXX);</span><br></pre></td></tr></table></figure></div>
<p>这里的zzz就是我们这里需要传的名字</p>
<h3 id="第三个参数：Bundle-initialProperties"><a href="#第三个参数：Bundle-initialProperties" class="headerlink" title="第三个参数：Bundle initialProperties"></a>第三个参数：<strong>Bundle initialProperties</strong></h3><p>这里应该是传一个bundle，传输的数据，传个null就可以了</p>
<h2 id="React-Native流程"><a href="#React-Native流程" class="headerlink" title="React Native流程"></a>React Native流程</h2><p>&emsp;&emsp;前面的整个配置都配置完成之后，Android这边只用新建方法，给RN调用就可以了。新建的方法要用@ReactMethod标记。辣么，这个方法新建在哪呢？————Module，就是对应我们前面package里面添加的module。都说RN每个模块是独立的，怎么独立呢？就是这样独立的。每个模块功能对应一个module，每个都有该功能对应的方法。我就拿我这里的UserModule来举个例子</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line">public class UserModule extends IModule implements NoticeListener&#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    public static final String MODULE_NAME = &quot;User_Module&quot;;</span><br><span class="line"></span><br><span class="line">    private ReactApplicationContext mContext;</span><br><span class="line"></span><br><span class="line">    public UserModule(ReactApplicationContext reactContext) &#123;</span><br><span class="line">        super(reactContext);</span><br><span class="line">        this.mContext = reactContext;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    @Override</span><br><span class="line">    public String getName() &#123;</span><br><span class="line">        return MODULE_NAME;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    /**</span><br><span class="line">     * 用户登录接口</span><br><span class="line">     * @param params</span><br><span class="line">     * @param callback</span><br><span class="line">     */</span><br><span class="line">    @ReactMethod</span><br><span class="line">    public void doLogin(String params, final Callback callback)&#123;</span><br><span class="line"></span><br><span class="line">        HashMap&lt;String,String&gt; map = GsonTool.gson2Map(params);</span><br><span class="line"></span><br><span class="line">        if(map == null || map.size() &lt;= 0)&#123;</span><br><span class="line">            callback.invoke(new GsonBuilder().create().toJson(new BaseBean(false,&quot;参数异常&quot;)));</span><br><span class="line">            return;</span><br><span class="line">        &#125;</span><br><span class="line">        final String userName = map.get(&quot;userName&quot;);</span><br><span class="line">        final String password = map.get(&quot;password&quot;);</span><br><span class="line"></span><br><span class="line">        if(TextUtils.isEmpty(userName) || TextUtils.isEmpty(password))&#123;</span><br><span class="line">            callback.invoke(new GsonBuilder().create().toJson(new BaseBean(false,&quot;用户名或密码不能为空&quot;)));</span><br><span class="line">            return;</span><br><span class="line">        &#125;</span><br><span class="line">        //登录</span><br><span class="line">        new Handler().post(new Runnable() &#123;</span><br><span class="line">            @Override</span><br><span class="line">            public void run() &#123;</span><br><span class="line">                String result = new UserBridge().doLogin(userName,password, Global.DEVICE_ID,Global.APP_VERSION_NAME);</span><br><span class="line">                callback.invoke(result);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;这里我就粘贴出来了部分代码，module要继承IModule，这个是一个抽象类，他继承ReactContextBaseJavaModule，最主要就是继承它，继承之后，我像说的就是这两个方法，getName()和注解的方法doLogin()。</p>
<p>&emsp;&emsp;我们可以看到，这个getName最终返回的是一个User_Module，这个字符串是怎么确定的呢？这个登录的方法名称是怎么确定的呢？</p>
<p>&emsp;&emsp;这些东西都是在js里面定义好的，这里是一个登录方法，我们打开登录的js。</p>
<p><strong>PS:</strong> 这里应该是通过js去确定我们这边的方法名，并不是通过这里的名称去确定js的。</p>
<p>&emsp;&emsp;我就不把JS代码，贴出来了，只贴出伪代码，打开js之后，搜索NativeModules。你应该会搜到类似的代码：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const &#123; User_Module, Shop_Module &#125; = NativeModules;</span><br></pre></td></tr></table></figure></div>
<p>这里有两个Module，没错，就是两个。我们这里现在只关注User_Module，然后，我们搜索 User_Module，你会看到如下代码：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">_onLogIn = () =&gt; &#123;</span><br><span class="line">        </span><br><span class="line">        const &#123; username, password &#125; = this.userInfo;</span><br><span class="line">        if (username.length &lt;= 0) return this._modal.Alert(&apos;请输入用户名&apos;);</span><br><span class="line">        if (password.length &lt;= 0) return this._modal.Alert(&apos;请输入密码&apos;);</span><br><span class="line">        this._button.setButton(false, &apos;正在登录...&apos;);</span><br><span class="line">        const params = &#123; userName: username, password &#125;;</span><br><span class="line">        // 登录</span><br><span class="line">        const _dologin = () =&gt; &#123;</span><br><span class="line">            return new Promise((resolve, reject) =&gt; &#123;</span><br><span class="line">                User_Module.doLogin(JSON.stringify(params), (...values) =&gt; &#123;</span><br><span class="line">                    const data = Other.callHandle(values) || &#123;&#125;;</span><br><span class="line">                    if (data.status) &#123;</span><br><span class="line">                        resolve(&apos;登录成功&apos;);</span><br><span class="line">                    &#125; else &#123;</span><br><span class="line">                        reject(data.message);</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;;</span><br></pre></td></tr></table></figure></div>
<p>其他的一切，我们都不用管，我们在意的是</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">User_Module.doLogin(JSON.stringify(params), (...values) =&gt; &#123;</span><br><span class="line">                    const data = Other.callHandle(values) || &#123;&#125;;</span><br><span class="line">                    if (data.status) &#123;</span><br><span class="line">                        resolve(&apos;登录成功&apos;);</span><br><span class="line">                    &#125; else &#123;</span><br><span class="line">                        reject(data.message);</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;);</span><br></pre></td></tr></table></figure></div>
<p>&emsp;&emsp;上面这个是我的项目里面的js，你们搜到的肯定跟我的不一样，我这里要说的是，怎么确定name的返回值，和注解方法。我们看到了，name就是这里的User_Module，方法就是这里的doLogin，android里面写用@ReactMethod标记，然后就是参数了，这里两个参数，一个是String，json格式的。用ArrayMap存储好key—value之后，转成字符串即可。第二个参数就是callback。android与JS通信，发送数据，就是一个方法</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">callback.invoke(&quot;data&quot;)</span><br></pre></td></tr></table></figure></div>
<p>他需要什么，你就发送什么。上面是RN主动调用Android方法，辣么，Android怎么主动调用RN方法呢？其实也很简单</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">//发送给RN</span><br><span class="line">        if (mReactInstanceManager.getCurrentReactContext() != null) &#123;</span><br><span class="line">            mReactInstanceManager.getCurrentReactContext()</span><br><span class="line">                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)</span><br><span class="line">                    .emit(PUSH_DATA_RN, mqttBean.info);</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure></div>
<p>就是获取ReactContext对象，通过调用getJSModule方法，参数传DeviceEventManagerModule.RCTDeviceEventEmitter.class这个类就可以了，然后通过调用emit方法，第一个参数，就是RN规定的方法名称，第二个参数就是需要传给RN的数据。为什么这样写呢？我们再来看看RN那边是怎么写的</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">DeviceEventEmitter.addListener(&quot;push_data_rn&quot;,(data)=&gt;&#123;</span><br><span class="line">            alert(data)</span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure></div>
<p>他就是通过这DeviceEventEmitter类添加addListener方法，传两个参数，第一个参数就是我们规定的名称，第二个参数就是一个回调，有一个参数，就是用来接收我们的数据，最后做的处理就是简单的弹窗，当然，这是我自己测试用的，最后RN要怎么坐，就是我要担心的问题了。</p>

      
    </div>
    
      <footer class="article-footer">
        完
      </footer>
    
  </div>
  
    
<nav id="article-nav">
  <div class="article-nav-block">
    
      <a href="/2018/05/13/Android——MQTT推送/" id="article-nav-newer" class="article-nav-link-wrap">
        <strong class="article-nav-caption"></strong>
        <div class="article-nav-title">
          
            Android——MQTT推送
          
        </div>
      </a>
    
  </div>
  <div class="article-nav-block">
    
      <a href="/2018/05/13/Android转场动画——共享元素/" id="article-nav-older" class="article-nav-link-wrap">
        <div class="article-nav-title">Android转场动画——共享元素</div>
        <strong class="article-nav-caption"></strong>
      </a>
    
  </div>
</nav>

    
  
  
</article>
</section>
        <aside id="sidebar">
  
    <div class="widget-box">
  <div class="avatar-box avatar-item">
    <img class="avatar" src="/uploads/artistic_image/head.jpg" title="头像来自网络"></img>
    <h3 class="avatar-name">
      
        海晨忆
      
    </h3>
    <p class="avatar-slogan">
      先谋生，再谋爱。人间值得，未来可期。
    </p>
  </div>
</div>


  
    
  <div class="widget-box">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Android-Socket/">Android -Socket</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-加密算法/">Android -加密算法</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-常用功能/">Android -常用功能</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-框架/">Android -框架</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-源码解析/">Android -源码解析</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-自定义view/">Android -自定义view</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-设计模式/">Android -设计模式</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JAVA-并发/">JAVA -并发</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java-SpringBoot/">Java -SpringBoot</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Tomcat/">Tomcat</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/kotlin/">kotlin</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库-JDBC/">数据库 -JDBC</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库-MySQL/">数据库 -MySQL</a></li></ul>
    </div>
  </div>


  
    

  
    
  
    
  <div class="widget-box">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">July 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">October 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">May 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">March 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">February 2018</a></li></ul>
    </div>
  </div>

  
    
  <div class="widget-box">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/07/27/JAVA—公平锁，非公平锁，悲观锁，乐观锁，死锁/">JAVA—公平锁，非公平锁，悲观锁，乐观锁，死锁</a>
          </li>
        
          <li>
            <a href="/2021/07/19/JAVA—线程同步器AQS/">JAVA—线程同步器AQS</a>
          </li>
        
          <li>
            <a href="/2021/07/07/Android模拟点击/">Android模拟点击</a>
          </li>
        
          <li>
            <a href="/2019/11/27/SpringBoot系列-消息-RabbitMQ-（二十）/">SpringBoot系列-消息(RabbitMQ)（二十）</a>
          </li>
        
          <li>
            <a href="/2019/11/13/SpringBoot系列-Docker（十九）/">SpringBoot系列-Docker（十九）</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-box">
    <h3 class="widget-title">友情链接</h3>
    <div class="widget">
      
        <a class="hrf" style="display: block;" href="https://github.com/haichenyi" title target='_blank'
        >Github</a>
      
        <a class="hrf" style="display: block;" href="https://www.jianshu.com/u/6077ee440c37" title target='_blank'
        >简书</a>
      
        <a class="hrf" style="display: block;" href="https://blog.csdn.net/qq_27634797" title target='_blank'
        >CSDN</a>
      
    </div>
  </div>

  
</aside>
      </div>
      <footer id="footer">
  <div class="foot-box footers global-width">
    &copy;2017-2021 海晨忆 &nbsp;&nbsp;
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">阁下是第<span id="busuanzi_value_site_pv"></span>个访客</span>
  </div>
</footer>
      <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
if (!window.jQuery) {
var script = document.createElement('script');
script.src = "/js/jquery-2.0.3.min.js";
document.body.write(script);
}
</script>

  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    </div>
    <nav id="mobile-nav" class="mobile-nav-box">
  <div class="mobile-nav-img mobile-nav-top"></div>
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">归档</a>
  
    <a href="/about" class="mobile-nav-link">简历</a>
  
  <div class="mobile-nav-img  mobile-nav-bottom"></div>
</nav>    
  </div>
</body>
</html>